<template>
  <div
    v-if="badgeNumber.length > 0"
    class="fixed bottom-11px left-160px cart-col-wrapper flex h-88px w-1075px items-center px-22px justify-between z-100"
  >
    <div class="relative cursor-pointer w-74px" @click="emit('open-cart')">
      <img :src="cartCol" alt="" class="cartIcon" />
      <div
        v-if="badgeNumber.length > 0"
        class="absolute bg-badge w-18px h-18px rounded-[50%] text-white text-center leading-18px text-12px top-9px -right-4px"
      >
        {{ badgeNumber }}
      </div>
    </div>
    <div class="flex items-end flex-1 justify-end">
      <div class="text-12px text-white">已选{{ cart.totalSelectedPieces }}件，合计：</div>
      <div class="text-14px color-sup font-medium">￥</div>
      <div class="text-24px color-sup font-bold mr-10px leading-20px">{{ cart.totalPrice }}</div>
      <div v-if="cart.totalDiscount" class="text-12px text-white">
        共优惠 <span class="color-sup">￥{{ cart.totalDiscount }}</span>
      </div>
    </div>
    <div
      v-if="badgeNumber.length > 0"
      class="bg-main rounded-68px w-134px h-48px text-white text-center font-bold leading-48px text-22px ml-52px cursor-pointer"
      @click="goPay"
    >
      去支付
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import cartCol from '@renderer/assets/cartCol.svg'
import { useCartStore } from '@renderer/store/modules/cart'

const cart = useCartStore()
const router = useRouter()

const badgeNumber = computed(() => {
  if (cart.totalSelectedPieces === 0) return ''
  if (cart.totalSelectedPieces > 99) return '99+'
  return cart.totalSelectedPieces.toString()
})

const emit = defineEmits(['open-cart'])

const goPay = () => {
  router.replace({ name: 'MallCoupon', query: { from: 'cart' } })
  // @todo 生成订单
  // router.replace({ name: 'Pay', query: { from: 'cart' } })
}
</script>
<style scoped>
.cart-col-wrapper {
  background-color: rgba(0, 0, 0, 0.6);
}
</style>
